<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>bar</title>
    <link rel="stylesheet" href="../plugin/seedsui/seedsui.min.css">
</head>

<body>
    <section id="page_bar" class="active">
    	<header>
            <div class="titlebar">
                <a href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1>Bar</h1>
            </div>
        </header>
    	<article>
            <p class="title">titlebar</p>
            <div class="titlebar">
                <a href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1>左右图标titlebar</h1>
                <a>
                    <i class="icon icon-rdoadd"></i>
                </a>
                <a>
                    <i class="icon icon-search"></i>
                </a>
            </div>
            <br/>
            <div class="titlebar">
                <a class="button round outline left" href="javascript:history.go(-1)">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1 class="text-center">titlebar圆形图标</h1>
                <div class="right">
                    <a class="button round outline">
                        <i class="icon icon-rdoadd"></i>
                    </a>
                    <a class="button round outline">
                        <i class="icon icon-search"></i>
                    </a>
                </div>
            </div>
            <br/>
            <div class="titlebar">
                <h1>右按钮titlebar</h1>
                <div class="right">
                <button class="outline height32 radiusround">按钮</button>
                <button class="outline height32 radiusround">
                    <i class="icon icon-gear"></i>
                    <label>设置</label>
                </button>
                </div>
            </div>
            <br/>
            <div class="titlebar">
                <h1>右图标titlebar</h1>
                <div class="right">
                <a>
                    <i class="icon icon-rdoadd"></i>
                </a>
                <a>
                    <i class="icon icon-search"></i>
                </a>
                </div>
            </div>
            <div class="titlebar">
                <h1>右图标titlebar</h1>
                <a>
                    <i class="icon icon-rdoadd"></i>
                </a>
                <a>
                    <i class="icon icon-search"></i>
                </a>
            </div>
            <br/>
            <div class="titlebar">
                <a href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                    <span>返回</span>
                </a>
                <h1 class="text-center">传统titlebar</h1>
                <a>
                    <span>搜索</span>
                    <i class="icon icon-search"></i>
                </a>
            </div>
            <br/>

            <div class="titlebar">
                <div class="searchbar">
                    <div class="input-box margin8 radius20" data-input="clear">
                        <input type="search" placeholder="请输入搜索内容" class="search" />
                        <i class="icon icon-clear-fill color-placeholder"></i>
                    </div>
                    <a>搜索</a>
                </div>
            </div>
            <br/>
            
            <p class="title">titlebar-reverse</p>
            <div class="titlebar reverse">
                <a href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1>左右图标titlebar</h1>
                <a>
                    <i class="icon icon-rdoadd"></i>
                </a>
                <a>
                    <i class="icon icon-search"></i>
                </a>
            </div>
            <br/>
            <div class="titlebar reverse">
                <a class="button round outline left" href="javascript:history.go(-1)">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1 class="text-center">titlebar圆形图标</h1>
                <div class="right">
                    <a class="button round outline">
                        <i class="icon icon-rdoadd"></i>
                    </a>
                    <a class="button round outline">
                        <i class="icon icon-search"></i>
                    </a>
                </div>
            </div>
            <br/>
            <div class="titlebar reverse">
                <h1>右按钮titlebar</h1>
                <button class="outline height32 radiusround">按钮</button>
                <button class="outline height32 radiusround">
                    <i class="icon icon-gear"></i>
                    <label>设置</label>
                </button>
            </div>
            <br/>
            <div class="titlebar reverse">
                <h1>右图标titlebar</h1>
                <a>
                    <i class="icon icon-rdoadd"></i>
                </a>
                <a>
                    <i class="icon icon-search"></i>
                </a>
            </div>
            <br/>

            <div class="titlebar reverse">
                <a href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                    <span>返回</span>
                </a>
                <h1 class="text-center">传统titlebar</h1>
                <a>
                    <span>搜索</span>
                    <i class="icon icon-search"></i>
                </a>
            </div>
            <br/>
            <div class="titlebar reverse">
                <div class="searchbar">
                    <div class="input-box margin8 radius20" data-input="clear">
                        <input type="search" placeholder="请输入搜索内容" class="search" />
                        <i class="icon icon-clear-fill color-placeholder"></i>
                    </div>
                    <a>搜索</a>
                </div>
            </div>
            <br/>

            <div class="titlebar reverse">
                <a><img class="height30" src="../img/main5/logo.png"/></a>
                <h1></h1>
                <a>
                    <i class="icon icon-search"></i>
                </a>
                <a>
                    <i class="icon icon-rdouser"></i>
                </a>
            </div>
            <br/>

            <div class="title">search</div>
            <div class="searchbar">
                <div class="input-box margin8 radius20" data-input="clear">
                    <i class="icon icon-search color-placeholder"></i>
                    <input type="search" placeholder="搜索框" class="search" />
                    <i class="icon icon-clear-fill color-placeholder"></i>
                </div>
            </div>
            <br/>
            <div class="searchbar">
                <div class="input-box margin8 radius20" data-input="clear">
                    <input type="search" placeholder="搜索框" class="search" />
                    <i class="icon icon-clear-fill color-placeholder"></i>
                </div>
                <a>搜索</a>
            </div>

            <div class="title">rectbar</div>
            <ul class="rectbar">
                <li class="tab active" style="width:100px;">
                    <label class="tab-label">机构</label>
                </li>
                <li class="tab" style="width:100px;">
                    <label class="tab-label">组织</label>
                </li>
            </ul>
            <br/>
            <ul class="rectbar">
                <li class="tab active">
                    <i class="icon icon-build-fill"></i>
                    <label class="tab-label">机构</label>
                </li>
                <li class="tab">
                    <i class="icon icon-person"></i>
                    <label class="tab-label">组织</label>
                </li>
                <li class="tab">
                    <i class="icon icon-fav"></i>
                    <label class="tab-label">收藏</label>
                </li>
            </ul>
            <br/>
            
            <div class="title">slidebar</div>
            <ul class="slidebar">
                <li class="tab active">
                    <label class="tab-label">头条</label>
                </li>
                <li class="tab">
                    <label class="tab-label">推荐</label>
                </li>
                <li class="tab">
                    <label class="tab-label">科技</label>
                </li>
                <li class="tab">
                    <label class="tab-label">舆情</label>
                </li>
                <li class="tab">
                    <label class="tab-label">动态</label>
                </li>
            </ul>
            <br/>
            <ul class="slidebar">
                <li class="tab active">
                    <i class="icon icon-build-fill"></i>
                    <label class="tab-label">机构</label>
                </li>
                <li class="tab">
                    <i class="icon icon-person"></i>
                    <label class="tab-label">组织</label>
                </li>
                <li class="tab">
                    <i class="icon icon-fav"></i>
                    <label class="tab-label">收藏</label>
                </li>
            </ul>
            <br/>
            
            <div class="title">arrowbar</div>
            <ul class="arrowbar">
                <li class="tab active">
                    <label class="tab-label">机构</label>
                </li>
                <li class="tab">
                    <label class="tab-label">组织</label>
                </li>
                <li class="tab">
                    <label class="tab-label">收藏</label>
                </li>
            </ul>
            <br/>
            <ul class="arrowbar">
                <li class="tab active">
                    <i class="icon icon-build-fill"></i>
                    <label class="tab-label">机构</label>
                </li>
                <li class="tab">
                    <i class="icon icon-person"></i>
                    <label class="tab-label">组织</label>
                </li>
                <li class="tab">
                    <i class="icon icon-fav"></i>
                    <label class="tab-label">收藏</label>
                </li>
            </ul>
            <br/>
            
            <div class="title">menubar-rervse</div>
            <ul class="menubar">
                <li class="tab active">
                    <i class="icon icon-home-fill"></i>
                    <label class="tab-label">首页</label>
                </li>
                <li class="tab">
                    <i class="icon icon-chattip"></i>
                    <label class="tab-label">消息</label>
                </li>
                <li class="tab">
                    <i class="icon icon-contact"></i>
                    <label class="tab-label">通讯录</label>
                </li>
                <li class="tab">
                    <i class="icon icon-app"></i>
                    <label class="tab-label">工作台</label>
                </li>
                <li class="tab">
                    <i class="icon icon-rdomore"></i>
                    <label class="tab-label">更多</label>
                </li>
            </ul>
            <ul class="menubar reverse">
                <li class="tab active">
                    <i class="icon icon-home-fill"></i>
                    <label class="tab-label">首页</label>
                </li>
                <li class="tab">
                    <i class="icon icon-chattip"></i>
                    <label class="tab-label">消息</label>
                </li>
                <li class="tab">
                    <i class="icon icon-contact"></i>
                    <label class="tab-label">通讯录</label>
                </li>
                <li class="tab">
                    <i class="icon icon-app"></i>
                    <label class="tab-label">工作台</label>
                </li>
                <li class="tab">
                    <i class="icon icon-rdomore"></i>
                    <label class="tab-label">更多</label>
                </li>
            </ul>
        </article>
    </section>
    <script src="../plugin/jquery/jquery.min.js"></script>
    <script src="../plugin/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <script src="../plugin/exmobi/exmobi.js"></script>
    <!--禁止ios弹性-->
    <script src="../plugin/inobounce/inobounce.min.js"></script>
    <script>
	//定义exmobi返回
	function back(){history.go(-1);}
	</script>
</body>
</html>
